<html>
  <head>
    <title></title>
    <style>
    
    @mixin LIKE-BUTTON 
    {
      behavior:button;
      background: linear-gradient(top, #3498db, #2980b9);
      border-radius: 28dip;
      color: #ffffff;
      font-size: 20dip;
      padding: 10dip 20dip 10dip 20dip;
      text-decoration: none;
    }
    
    @mixin LIKE-BUTTON-HOVER {
      background: linear-gradient(top, #3cb0fd, #3498db);
      color: #fffaf0;
    }
   
    div { @LIKE-BUTTON; margin:1em; }
    div:hover { @LIKE-BUTTON-HOVER; }
    
    a { @LIKE-BUTTON; display:inline-block; }
    a:hover { @LIKE-BUTTON-HOVER; }

    @mixin ELLIPSIS 
    {
      overflow-x:hidden;
      text-overflow: ellipsis;
      white-space:nowrap;
      display:block;
    }

    section {
      @ELLIPSIS;
      margin:1em;
    }

    </style>
    <script type="text/tiscript"></script>
  </head>
<body>

  <h2>Demo of Sciter's @mixin CSS feature</h2>

  <div>test</div>
  
  And <a>&lt;a&gt; based</a> button;
  
  <section>long long long text long long long text long long long text</section>

</body>
</html>
